<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="mydiv" id="myid" myattr="val">我是div</div>
      <!--我是下面的注释-->
      <div class="mybox">我是box</div>
    </div>

    <script>
      //一.元素节点   二.文本节点
      //三.属性节点
      //获取属性节点  元素.attributes
      //映射  NameNodeMap

      /*
      1.属性节点的节点类型 : nodeType === 2
      2.属性节点的节点名称 : nodeName 是属性名称
      3.属性节点的节点值 : nodeValue 是 属性值
      */

      //   var ele = document.querySelector(".mydiv");
      //   var nodes = ele.attributes;
      //   //   console.log(nodes);
      //   var node = nodes[0];
      //   console.log(node);
      //   console.log(node.nodeType); //节点类型2
      //   console.log(node.nodeName); //属性名
      //   console.log(node.nodeValue); //属性值

      //四.注释节点
      //获取注释节点
      /*
      1.注释节点的节点类型: nodeType === 8
      2.注释节点的节点名称: nodeName 是 #comment
      3.注释节点的节点值: nodeValue 是 注释的内容
      */

      var nodes = document.querySelector(".container").childNodes;
      console.log(nodes);
      var node = nodes[3];
      console.log(node);
      console.log(node.nodeType); //8
      console.log(node.nodeName); //#comment
      console.log(node.nodeValue); //文本内容

      var str = node.nodeValue;
      document.querySelector(".mybox").innerHTML = str;

      /* 
      总结: 
                  元素节点    属性节点    文本节点    注释节点
      nodeType        1         2           3          8
      nodeName  大写的标签名   属性名      #text    #comment
      nodeValue      null     属性值     文本内容    注释内容
      */
    </script>
  </body>
</html>
